<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP Client API 文档</title>
    <!-- Ant Design CSS -->
    <link href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css" rel="stylesheet">
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/antd@5.12.8/dist/antd.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
        }
        .api-container {
            min-height: 100vh;
        }
        .header-bar {
            background: linear-gradient(135deg, #52c41a 0%, #1890ff 100%);
            color: white;
            padding: 16px 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .content-area {
            padding: 24px;
        }
        .endpoint-card {
            margin-bottom: 16px;
        }
        .method-tag {
            font-weight: bold;
            margin-right: 8px;
        }
        .code-block {
            background: #f6f8fa;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 16px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
        .response-example {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 6px;
            padding: 12px;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState } = React;
        const { 
            Layout, Card, Typography, Tag, Divider, Collapse, 
            Space, Button, Alert, Descriptions, Row, Col
        } = antd;
        const { Header, Content } = Layout;
        const { Title, Text, Paragraph } = Typography;
        const { Panel } = Collapse;

        const ApiDocsPage = () => {
            const apiEndpoints = [
                {
                    method: 'POST',
                    path: '/api/mcp/connect',
                    description: '连接到MCP服务器',
                    requestBody: {
                        serverUri: 'string - 服务器URI地址'
                    },
                    response: {
                        success: 'boolean',
                        message: 'string'
                    },
                    example: {
                        request: `{
  "serverUri": "ws://localhost:8080/mcp"
}`,
                        response: `{
  "success": true,
  "message": "连接成功"
}`
                    }
                },
                {
                    method: 'POST',
                    path: '/api/mcp/disconnect',
                    description: '断开MCP服务器连接',
                    requestBody: null,
                    response: {
                        success: 'boolean',
                        message: 'string'
                    },
                    example: {
                        request: null,
                        response: `{
  "success": true,
  "message": "断开连接成功"
}`
                    }
                },
                {
                    method: 'GET',
                    path: '/api/mcp/status',
                    description: '获取连接状态',
                    requestBody: null,
                    response: {
                        connected: 'boolean',
                        serverUri: 'string',
                        lastConnected: 'string'
                    },
                    example: {
                        request: null,
                        response: `{
  "connected": true,
  "serverUri": "ws://localhost:8080/mcp",
  "lastConnected": "2024-01-15T10:30:00Z"
}`
                    }
                },
                {
                    method: 'POST',
                    path: '/api/mcp/initialize',
                    description: '初始化MCP会话',
                    requestBody: {
                        name: 'string - 客户端名称',
                        version: 'string - 客户端版本',
                        config: 'object - 配置信息'
                    },
                    response: {
                        success: 'boolean',
                        sessionId: 'string'
                    },
                    example: {
                        request: `{
  "name": "MCP Web Admin",
  "version": "1.0.0",
  "config": {
    "uri": "bolt://localhost:7687",
    "username": "neo4j",
    "password": "password"
  }
}`,
                        response: `{
  "success": true,
  "sessionId": "session-123456"
}`
                    }
                },
                {
                    method: 'GET',
                    path: '/api/mcp/tools',
                    description: '获取可用工具列表',
                    requestBody: null,
                    response: {
                        tools: 'array - 工具列表'
                    },
                    example: {
                        request: null,
                        response: `[
  {
    "name": "create_node",
    "description": "创建新节点",
    "inputSchema": {
      "type": "object",
      "properties": {
        "label": {"type": "string"},
        "properties": {"type": "object"}
      }
    }
  }
]`
                    }
                },
                {
                    method: 'POST',
                    path: '/api/mcp/tools/{toolName}/call',
                    description: '调用指定工具',
                    requestBody: {
                        parameters: 'object - 工具参数'
                    },
                    response: {
                        result: 'any - 执行结果',
                        success: 'boolean'
                    },
                    example: {
                        request: `{
  "label": "Person",
  "properties": {
    "name": "张三",
    "age": 30
  }
}`,
                        response: `{
  "result": {
    "nodeId": 123,
    "label": "Person",
    "properties": {
      "name": "张三",
      "age": 30
    }
  },
  "success": true
}`
                    }
                },
                {
                    method: 'GET',
                    path: '/api/mcp/resources',
                    description: '获取可用资源列表',
                    requestBody: null,
                    response: {
                        resources: 'array - 资源列表'
                    },
                    example: {
                        request: null,
                        response: `[
  {
    "name": "database",
    "uri": "neo4j://localhost:7687",
    "mimeType": "application/x-neo4j-database"
  }
]`
                    }
                },
                {
                    method: 'GET',
                    path: '/api/mcp/resources/{resourceUri}',
                    description: '获取指定资源内容',
                    requestBody: null,
                    response: {
                        content: 'any - 资源内容',
                        mimeType: 'string'
                    },
                    example: {
                        request: null,
                        response: `{
  "content": "资源内容数据",
  "mimeType": "text/plain"
}`
                    }
                },
                {
                    method: 'POST',
                    path: '/api/mcp/custom',
                    description: '发送自定义请求',
                    requestBody: {
                        method: 'string - 请求方法',
                        params: 'object - 请求参数'
                    },
                    response: {
                        result: 'any - 响应结果'
                    },
                    example: {
                        request: `{
  "method": "custom_query",
  "params": {
    "query": "MATCH (n) RETURN count(n)"
  }
}`,
                        response: `{
  "result": {
    "count": 42
  }
}`
                    }
                }
            ];

            const getMethodColor = (method) => {
                const colors = {
                    'GET': 'green',
                    'POST': 'blue',
                    'PUT': 'orange',
                    'DELETE': 'red'
                };
                return colors[method] || 'default';
            };

            return (
                <Layout className="api-container">
                    <Header className="header-bar">
                        <Space>
                            <Title level={2} style={{ color: 'white', margin: 0 }}>
                                MCP Client API 文档
                            </Title>
                            <Button 
                                type="link" 
                                style={{ color: 'white' }}
                                onClick={() => window.open('/admin', '_blank')}
                            >
                                返回管理界面
                            </Button>
                        </Space>
                    </Header>
                    
                    <Content className="content-area">
                        <Row gutter={24}>
                            <Col span={24}>
                                <Card>
                                    <Alert
                                        message="API 基础信息"
                                        description={
                                            <div>
                                                <p><strong>基础URL:</strong> http://localhost:8080</p>
                                                <p><strong>内容类型:</strong> application/json</p>
                                                <p><strong>认证方式:</strong> 无需认证</p>
                                            </div>
                                        }
                                        type="info"
                                        showIcon
                                        style={{ marginBottom: 24 }}
                                    />
                                </Card>
                            </Col>
                        </Row>

                        <Card title="API 端点列表">
                            <Collapse accordion>
                                {apiEndpoints.map((endpoint, index) => (
                                    <Panel 
                                        header={
                                            <Space>
                                                <Tag color={getMethodColor(endpoint.method)} className="method-tag">
                                                    {endpoint.method}
                                                </Tag>
                                                <Text strong>{endpoint.path}</Text>
                                                <Text type="secondary">- {endpoint.description}</Text>
                                            </Space>
                                        }
                                        key={index}
                                    >
                                        <Descriptions title="端点详情" bordered size="small">
                                            <Descriptions.Item label="HTTP方法" span={1}>
                                                <Tag color={getMethodColor(endpoint.method)}>
                                                    {endpoint.method}
                                                </Tag>
                                            </Descriptions.Item>
                                            <Descriptions.Item label="路径" span={2}>
                                                <Text code>{endpoint.path}</Text>
                                            </Descriptions.Item>
                                            <Descriptions.Item label="描述" span={3}>
                                                {endpoint.description}
                                            </Descriptions.Item>
                                        </Descriptions>

                                        {endpoint.requestBody && (
                                            <div style={{ marginTop: 16 }}>
                                                <Title level={5}>请求体参数</Title>
                                                <div className="code-block">
                                                    {Object.entries(endpoint.requestBody).map(([key, value]) => (
                                                        <div key={key}>
                                                            <Text strong>{key}</Text>: <Text type="secondary">{value}</Text>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        )}

                                        <div style={{ marginTop: 16 }}>
                                            <Title level={5}>响应格式</Title>
                                            <div className="code-block">
                                                {Object.entries(endpoint.response).map(([key, value]) => (
                                                    <div key={key}>
                                                        <Text strong>{key}</Text>: <Text type="secondary">{value}</Text>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>

                                        <div style={{ marginTop: 16 }}>
                                            <Title level={5}>示例</Title>
                                            <Row gutter={16}>
                                                {endpoint.example.request && (
                                                    <Col span={12}>
                                                        <Text strong>请求示例:</Text>
                                                        <div className="code-block">
                                                            <pre>{endpoint.example.request}</pre>
                                                        </div>
                                                    </Col>
                                                )}
                                                <Col span={endpoint.example.request ? 12 : 24}>
                                                    <Text strong>响应示例:</Text>
                                                    <div className="response-example">
                                                        <pre>{endpoint.example.response}</pre>
                                                    </div>
                                                </Col>
                                            </Row>
                                        </div>
                                    </Panel>
                                ))}
                            </Collapse>
                        </Card>

                        <Card title="错误处理" style={{ marginTop: 24 }}>
                            <Alert
                                message="HTTP状态码"
                                description={
                                    <div>
                                        <p><strong>200 OK:</strong> 请求成功</p>
                                        <p><strong>400 Bad Request:</strong> 请求参数错误</p>
                                        <p><strong>500 Internal Server Error:</strong> 服务器内部错误</p>
                                        <p><strong>503 Service Unavailable:</strong> MCP服务器未连接</p>
                                    </div>
                                }
                                type="warning"
                                showIcon
                            />
                        </Card>
                    </Content>
                </Layout>
            );
        };

        ReactDOM.render(<ApiDocsPage />, document.getElementById('root'));
    </script>
</body>
</html>